<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" class="memberManage-details">
    <div class="page memberManage-details">
      <div class="scroll-view">
        <customHeader middleTitle="会员详情" @leftCallBack="popupHide"></customHeader>
        <div class="page-body">
          <div class="top-info">
            <div class="left">
              <img :src="avatar(data.avatar)" alt />
            </div>
            <div class="right-data">
              <div class="member-name">{{data.nickName?data.nickName:"匿名"}}</div>
              <div class="middle">
                <div class="level">
                  <i class="zhk-hydj"></i>
                  <span>{{data.customerGradeName}}</span>
                </div>
                <div class="gender">
                  <!-- <i class="zhk-xb-n" v-if="data.gender==1"></i>
                  <i class="zhk-xb-nv" v-if="data.gender==2"></i>-->
                </div>
              </div>
              <div class="mobile">{{data.phone}}</div>
            </div>
          </div>
          <ul class="bottom-info">
            <li>
              <span>会员等级</span>
              <div>{{data.customerGradeName}}</div>
            </li>
            <li>
              <span>性别</span>
              <div>{{genderFormate(data.gender)}}</div>
            </li>
            <li>
              <span>门店来源</span>
              <div>{{data.shopName}}</div>
            </li>
            <li>
              <span>渠道来源</span>
              <div>{{channelSourceFormate(data.channelSourceList)}}</div>
            </li>
            <li>
              <span>加入时间</span>
              <div>{{dateFormate(data.joinTime)}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast } from "mint-ui";
import moment from "moment";
export default {
  name: "memberManageDetails",
  data() {
    return {
      popupVisible: false,
      data: {}
    };
  },
  props: {
    params: {
      type: Object
    }
  },
  methods: {
    channelSourceFormate(channelSourceList) {
      let v = "";
      channelSourceList&&channelSourceList.map((channelSource) => {
        if (channelSource == 1) {
          v += "支付宝 ";
        } else if (channelSource == 2) {
          v += "微信 ";
        } else if (channelSource == 3) {
          v += "线下导入 ";
        }
      });
      return v;
    },
    avatar(url) {
      if (url) {
        return url;
      } else {
        return require(`../../../static/images/member_avatar.png`);
      }
    },
    dateFormate(date) {
      if (date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss');
      } else {
        return date;
      }
    },
    genderFormate(gender) {
      let g = "未知";
      if (gender === 1) {
        g = "男";
      } else if (gender === 2) {
        g = "女";
      }
      return g;
    },
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
    },
    loadData() {
      this.ajax({
        url: `/mini/memberManage/customerDetail.do?shopId=${this.params.shopId}&customerId=${this.params.customerId}`,
        type: "get",
        controlLoading: false,
      })
        .then(res => {
          if (res.success) {
            this.data = res.resultObject;
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {
  
        });
    }
  },

  created() {
  },
  components: {
    customHeader
  },
  watch: {
    popupVisible(newV, oldV) {
      if (newV) {
        this.loadData();
      }
    }
  }
};
</script>
<style lang='scss' scoped>
@import "memberManage";
</style>
